<template>
  <!-- 人际关系 -->
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>人际关系</template>
    </cu-custom>

    <view class="cell-multiseriate border-bottom-before" @click="toSetValues('mem_family_friends', '记忆中的TA')">
      <view class="cell-multiseriate__title">
        记忆中的TA
        <text class="arrow-right arrow__small cell-right__icon"></text>
      </view>
      <view class="cell-multiseriate__content">
        <template v-for="item in userInfo.mem_family_friends" :key="item">
          <view class="content-item">
            {{ item }}
          </view>
        </template>
      </view>
    </view>
  </Top-Page>
</template>

<script>
import { mixins } from './mixin/index';
export default {
  mixins: [mixins],
  data() {
    return {};
  },
  onShow() {
    this.userInfo = JSON.parse(JSON.stringify(this.loginStore.userInfo));
  },
  methods: {
    toSetValues(type, title) {
      uni.navigateTo({
        url: `/pages/rest/modifys/index?type=${type}&title=${title}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.cell-multiseriate {
  padding: 30rpx 40rpx;
  width: 100%;
  position: relative;
  display: flex;
  background-color: #fff;
  flex-direction: column;

  .cell-multiseriate__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cell-multiseriate__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    .content-item {
      word-break: break-all;
      color: #6a6a6a;
      padding: 12rpx 24rpx;
      margin: 12rpx 12rpx 0 0;
      border-radius: 8rpx;
      line-height: 1;
      border: 1px solid #6a6a6a;
    }
  }
}
</style>
